{extend name="admin@public/base" /}
{block name="main-content"}
<link href="__PUBLIC__/ztree/css/zTreeStyle/zTreeStyle.css" media="all" rel="stylesheet" type="text/css" />
<link href="__PUBLIC__/tagEditor/jquery.tag-editor.css" media="all" rel="stylesheet" type="text/css" />
<link href="__PUBLIC__/jquery-ui/jquery-ui.min.css" media="all" rel="stylesheet" type="text/css" />
<style>
    body { margin: 0; padding: 0; border: 0; min-width: 320px; color: #777; }
    html, button, input, select, textarea, .pure-g [class *= "pure-u"] { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.02em; }
    p, td { line-height: 1.5; }
    ul { padding: 0 0 0 20px; }

    th { background: #eee; white-space: nowrap; }
    th, td { padding: 10px; text-align: left; vertical-align: top; font-size: .9em; font-weight: normal; border-right: 1px solid #fff; }
    td:first-child { white-space: nowrap; color: #008000; width: 1%; }

    h1, h2, h3 { color: #4b4b4b; font-family: "Source Sans Pro", sans-serif; font-weight: 300; margin: 0 0 1.2em; }
    h1 { font-size: 4.5em; color: #1f8dd6; margin: 0 0 .4em; }
    h2 { font-size: 2em; color: #636363; }
    h3 { font-size: 1.8em; color: #4b4b4b; margin: 1.8em 0 .8em }
    h4 { font: bold 1em sans-serif; color: #636363; margin: 4em 0 1em; }
    a { color: #4e99c7; text-decoration: none; }
    a:hover { text-decoration: underline; }
    p, pre { margin: 0 0 1.2em; }
    ::selection { color: #fff; background: #328efd; }
    ::-moz-selection { color: #fff; background: #328efd; }

    @media (max-width:480px) {
        h1 { font-size: 3em; }
        h2 { font-size: 1.8em; }
        h3 { font-size: 1.5em; }
        td:first-child { white-space: normal; }
    }

    .inline-code { padding: 1px 5px; background: #eee; border-radius: 2px; }
    pre { padding: 15px 10px; font-size: .9em; color: #555; background: #edf3f8; }
    pre i { color: #aaa; } /* comments */
    pre b { font-weight: normal; color: #cf4b25; } /* strings */
    pre em { color: #0c59e9; } /* numeric */

    /* Pure CSS */
    .pure-button { margin: 5px 0; text-decoration: none !important; }
    .button-lg { margin: 5px 0; padding: .65em 1.6em; font-size: 105%; }
    .button-sm { font-size: 85%; }

    textarea {
        width: 100%; height: 29px; padding: .3em .5em; border: 1px solid #ddd; font-size: .9em;
        box-sizing: border-box; margin: 0 0 20px;
    }
    textarea[readonly] { color: #aaa; background: #f7f7f7; }

    #response {
        margin: 0 0 1.2em; padding: 10px; background: #f3f3f3; color: #777;
        font-size: .9em; max-height: 150px; overflow: hidden; overflow-y: auto;
    }
    #response i { font-style: normal; color: #cf4b25; }
    #response hr { margin: 2px 0; border: 0; border-top: 1px solid #eee; border-bottom: 1px solid #fdfdfd; }

    /* overwrite default CSS for tiny, dark tags in demo5 */
    #demo5+.tag-editor { background: #fafafa; font-size: 12px; }
    #demo5+.tag-editor .tag-editor-tag { color: #fff; background: #555; border-radius: 2px; }
    #demo5+.tag-editor .tag-editor-spacer { width: 7px; }
    #demo5+.tag-editor .tag-editor-delete { display: none; }

    /* color tags */
    .tag-editor .red-tag .tag-editor-tag { color: #c65353; background: #ffd7d7; }
    .tag-editor .red-tag .tag-editor-delete { background-color: #ffd7d7; }
    .tag-editor .green-tag .tag-editor-tag { color: #45872c; background: #e1f3da; }
    .tag-editor .green-tag .tag-editor-delete { background-color: #e1f3da; }
</style>
<div class="page-content">
    <div class="row">
        <div class="col-xs-12">
            <div>
                <ul class="nav nav-tabs">
                    <li class="{eq name='$tab_type' value='1'}active{/eq}"><a href="{:url('Message/sendMessage',array('tab_type'=>1))}">站内信</a></li>
                    <li class="{eq name='$tab_type' value='2'}active{/eq}"><a href="{:url('Message/sendMessage',array('tab_type'=>2))}">通知公告</a></li>
                </ul>
                <form  class="form-horizontal ajaxForm" action="" name="system_message" id="system_message" method="post">
                    <div class="tabInner" style="padding-top:10px;max-width: 100%;">
                        <div class="info">
                            <table class="table  table-bordered " >
                                <tr>
                                    <th style="width: 10%;"><span>发送范围</span></th>
                                    <td style="width: 60%;text-align: left;height: 28px;">
                                        <div id="mulit_dept_select">
                                            <textarea id="dept_input" class="tag-editor-hidden-src" ></textarea>
                                        </div>
                                    </td>
                                    <td rowspan="4" valign="top">
                                        <ul id="myTab" class="nav nav-tabs ">
                                            <li class="active">
                                                <a href="#home" data-toggle="tab">
                                                    按部门发送
                                                </a>
                                            </li>
                                            <li><a href="#ios" data-toggle="tab">按姓名发送</a></li>
                                        </ul>
                                        <div id="myTabContent" class="tab-content"  style="min-height: 500px;">
                                            <div class="tab-pane fade in active" id="home" >
                                                <div class="zTreeDemoBackground left tab-bd-con current">
                                                    <ul id="treeDemo" class="ztree"></ul>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="ios">
                                                <div class="lm_sbar">
                                                    <input class="txt" id="user_name_by_pinyin" name="user_name_by_pinyin" value="输入姓名/拼音查找..." onfocus="if (this.value == '输入姓名/拼音查找...') { this.value = '' };"   onblur="if (this.value == '') {  this.value = '输入姓名/拼音查找...'  }"
                                                    autocomplete="off" type="text" style="height: 25px;line-height: 25px;width: 95%;font-size:12px;">                                      
                                                </div>
                                                <div class="groupopen" style="display:" key="t2" sub="0">

                                                    <div class="groupsub" style="" key="t2" sub="1">
                                                        <ul id="treeDemoUser" class="ztree"></ul>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th style="width: 10%;"><span>消息标题</span></th>
                                    <td style="width: 60%;">
                                        <input  type="text"  name="message_title" id="message_title" style="width: 100%; " value="" required >
                                    </td>
                                </tr>
                                <tr>    
                                    <th style="width: 10%;"><span>消息内容</span></th>
                                    <td style="width: 60%;">
                                        <script src="__PUBLIC__/ueditor/ueditor.config.js" type="text/javascript"></script>
                                        <script src="__PUBLIC__/ueditor/ueditor.all.js" type="text/javascript"></script>
                                        <textarea name="message_content" rows="100%" style="width:100%" id="myEditor"  ></textarea>
                                        <script type="text/javascript">
                                            var editor = new UE.ui.Editor();
                                            editor.render("myEditor");
                                            editor.ready(function() {  
                                                editor.setHeight(240);
                                            });
                                        </script>
                                        <!--textarea name="message_content" style="width:100%;height:350px;visibility:hidden;" class="validate[required]" data-errormessage-value-missing="*内容必须填写"></textarea-->
                                    </td>
                                </tr>
                                <tr>    
                                    <th style="width: 10%;"><span>发送人</span></th>
                                    <td style="width:60%;text-align: left;height: 28px;">
                                        {:session('userinfo.name')}
                                    </td>
                                </tr>
                                <tr>
                                    <td class="td" colspan="3">
                                        <div class="layer-self-btn col-md-offset-3">
                                            <input type="hidden" value="pub_message" name="action_type">
                                            <input type="hidden" value="2" id="send_type" name="send_type">
                                            <input type="hidden" value="1" id="send_range" name="send_range">
                                            <!--a class = "layer_self_btn0" href = "javascript:void(0);" onclick="add_form()">发 送</a>
                                            <a class = "layer_self_btn1" href="javascript:void(0);" onclick ="document.add.reset();">重 置</a-->
                                            <button class="btn btn-info" type="submit">
                                                <i class="ace-icon fa fa-check bigger-110"></i>发 送
                                            </button>&nbsp; &nbsp; &nbsp;
                                            <button class="btn" type="reset" onclick="javascript:location.reload();">
                                                <i class="ace-icon fa fa-undo bigger-110" ></i>重置
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="scripts"}
<script src="__PUBLIC__/ztree/js/jquery.ztree.core-3.5.js"></script>
<script src="__PUBLIC__/ztree/js/jquery.ztree.excheck-3.5.min.js"></script>
<script src="__PUBLIC__/tagEditor/jquery.tag-editor.js"></script>
<script src="__PUBLIC__/tagEditor/jquery.caret.min.js"></script>
<script src="__PUBLIC__/jquery-ui/jquery-ui.min.js"></script>
<script>
    var setting = {
        check: {
            enable: true,
            chkboxType: {"Y": "ps", "N": "ps"}
        },
        data: {
            simpleData: {
                enable: true,
                pIdKey: "pid",
            }
        },
        callback: {
            beforeClick: beforeClick,
            onCheck: onCheck
        }
    };

    var settingUser = {
        check: {
            enable: true,
            chkboxType: {"Y": "", "N": ""}
        },
        data: {
            simpleData: {
                enable: true,
                pIdKey: "pid",
            }
        },
        callback: {
            beforeClick: beforeClickUser,
            onCheck: onCheckUser
        }
    };

    var zNodes = {$deptListJson};
    var zNodesUser = {$userListJson};
    var code;

    function setCheck(id) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
                type = {"Y": "s", "N": "s"};//ps
        zTree.setting.check.chkboxType = type;
        showCode('setting.check.chkboxType = { "Y" : "s", "N" : "s" };');
    }

    function setCheckUser(id) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemoUser"),
                type = {"Y": "s", "N": "s"};//ps
        zTree.setting.check.chkboxType = type;
        showCode('setting.check.chkboxType = { "Y" : "s", "N" : "s" };');
    }

    function showCode(str) {
        if (!code)
            code = $("#code");
        code.empty();
        code.append("&lt;li&gt;" + str + "&lt;/li&gt;");
    }

    $(document).ready(function() {
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        setCheck();
        $.fn.zTree.init($("#treeDemoUser"), settingUser, zNodesUser);
        setCheckUser("#treeDemoUser");
        $('#dept_input').tagEditor({
            placeholder: '右侧勾选需要发送消息的部门/人员名单',
            maxTags: 100,
            forceLowercase: false,
            animateDelete: 180,
            sortable: true,
            beforeTagDelete: function(field, editor, tags, val) {
               var arr = val.match(/<(\S*)>/);
               var id = arr[1];

               var zTree1 = $.fn.zTree.getZTreeObj("treeDemo");
               var node1 = zTree1.getNodeByParam("id", id, null);
               if(node1){
                    remove_hidden_user(id);
                   zTree1.checkNode(node1, false, true);
               }
               
               var zTree2 = $.fn.zTree.getZTreeObj("treeDemoUser");
               var node2 = zTree2.getNodeByParam("id", id, null);
               if(node2){
                    remove_hidden_user(id);
                   zTree2.checkNode(node2, false, true);
               }
               
            }
        });

    });
    function beforeClick(treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        zTree.checkNode(treeNode, !treeNode.checked, null, true);
        return false;
    }
    /*
     * 选中节点
     */
    function onCheck(e, treeId, treeNode)
    {
        var dept_name = treeNode.name + "<" + treeNode.id + ">";
        var is_checked = treeNode.checked;
        //查看是否已经选中过此节点
        if (is_checked == true) {
            $('#dept_input').tagEditor('addTag', dept_name, false);
            add_hidden_dept(treeNode.id);
            if (treeNode.isParent) {
                //循环设置选中子部门
                add_dept_recursive(treeNode.children);
            }
        } else {
            //优先循环删除子部门
            if (treeNode.isParent) {
                remove_dept_recursive(treeNode.children);
            }
            $('#dept_input').tagEditor('removeTag', dept_name, false);
            remove_hidden_dept(treeNode.id);
        }

    }


    //添加隐藏部门
    function add_hidden_dept(dept_id, pid)
    {
        var hidden_dept = "<input type ='hidden' class = 'hidden_dept_id' name ='hidden_dept_id[]' id ='hidden_dept_id_" + dept_id + "' value ='" + dept_id + "'>";
        $('#send_type').after(hidden_dept);
    }

    //删除隐藏部门元素
    function remove_hidden_dept(dept_id)
    {
        $("#hidden_dept_id_" + dept_id).remove();
    }

    /*
     * 递归添加发送部门
     */
    function add_dept_recursive(sub_tree)
    {
        for (var i = 0; i < sub_tree.length; i++)
        {
            var hidden_dept_id = $("#hidden_dept_id_" + sub_tree[i].id).val();

            if (hidden_dept_id > 0)
            {
                continue;
            }

            add_hidden_dept(sub_tree[i].id, sub_tree[i].pid);
            var dept_name = sub_tree[i].name + "<" + sub_tree[i].id + ">";
            $('#dept_input').tagEditor('addTag', dept_name);

            if (sub_tree[i].isParent == true && sub_tree[i].children.length > 0)
            {
                add_dept_recursive(sub_tree[i].children);
            }
        }
    }

    /*
     * 递归删除发送部门
     */
    function remove_dept_recursive(sub_tree)
    {
        for (var i = 0; i < sub_tree.length; i++)
        {
            var dept_name = sub_tree[i].name + "<" + sub_tree[i].id + ">";
            $('#dept_input').tagEditor('removeTag', dept_name);

            $("#hidden_dept_id_" + sub_tree[i].id).remove();
            if (sub_tree[i].isParent == true && sub_tree[i].children.length > 0)
            {
                remove_dept_recursive(sub_tree[i].children);
            }
        }
    }

    //选项卡点击事件
    $("#myTab a").click(function() {
        //清空文本框和隐藏字段
        // Remove all tags
        var tags = $('#dept_input').tagEditor('getTags')[0].tags;
        for (i = 0; i < tags.length; i++) {
            $('#dept_input').tagEditor('removeTag', tags[i]);
        }
        $('.hidden_dept_id').remove();
        $('.hidden_user_id').remove();
    });

    function beforeClickUser(treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemoUser");
        zTree.checkNode(treeNode, !treeNode.checked, null, true);
        return false;
    }

    /*
     * 选中节点
     */
    function onCheckUser(e, treeId, treeNode)
    {
        var user_name = treeNode.name + "<" + treeNode.id + ">";
        var is_checked = treeNode.checked;
        if (is_checked == true)
        {
            $('#dept_input').tagEditor('addTag', user_name, false);
            add_hidden_user(treeNode.id);
        } else {
            $('#dept_input').tagEditor('removeTag', user_name, false);
            remove_hidden_user(treeNode.id);
        }
    }

    //添加隐藏用户
    function add_hidden_user(user_id)
    {
        var hidden_user = "<input type ='hidden' class = 'hidden_user_id' name ='hidden_user_id[]' id ='hidden_user_id_" + user_id + "' value ='" + user_id + "'>";
        $('#send_type').after(hidden_user);
    }
    //删除隐藏用户元素
    function remove_hidden_user(user_id)
    {
        $("#hidden_user_id_" + user_id).remove();
    }
    $(document).ready(function(e, treeId, treeNode) {
        $("#user_name_by_pinyin").autocomplete({
            minLength: 1,
            mustMatch: true,
            source: function(request, response)
            {
                var name = request.term;
                $.getJSON("{:url('admin/Message/ajaxGetUserInfoByName')}", request, function(data, status, xhr)
                {
                    response(JSON.parse(data));
                });
            },
            select: function(event, ui)
            {
                if (ui.item.id > 0)
                {
                    $(this).val('');
                    var user_name = ui.item.name + "<" + ui.item.id + ">";
                    var hidden_user_id = $("#hidden_user_id_" + ui.item.id).val();
                    if (hidden_user_id > 0)
                    {
                        layer.msg('不要重复选择人员名单');
                        return true;
                    }

                    $('#dept_input').tagEditor('addTag', user_name, false);
                    add_hidden_user(ui.item.id);
                    var zTree2 = $.fn.zTree.getZTreeObj("treeDemoUser");
                    var node2 = zTree2.getNodeByParam("id", ui.item.id, null);
                    zTree2.checkNode(node2, true, true);
                    removeinput = 0;
                }
                return false;
            },
            focus: function() {
                return false;
            }
        }).data("ui-autocomplete")._renderItem = function(ul, item)
        {
            if (item.id > 0)
            {
                var show_text = "<a>" + item.name + "&nbsp;&nbsp;[<font style='color:red;'>" + item.dept_name + "</font>]</a>";
            }
            else
            {
                var show_text = "<a>" + item.name + "</a>";
            }
            return $("<li>").append(show_text).appendTo(ul);
        };

    });


</script>
{/block}